<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<script type="text/javascript" src="../jquery-1.7.2.js"></script>
		<script type="text/javascript" src="../jquery-ui-1.8.11.js"></script>
		<script type="text/javascript" src="../jquery.mousewheel.js"></script>
		<script type="text/javascript" src="../jquery-panzoom.js"></script>
		<script type="text/javascript" src="../jquery-image-zoom.js"></script>
		<script type="text/javascript" src="../zoomer.js"></script>

		<script type="text/javascript" src="../iutil.js"></script>
		<script type="text/javascript" src="../idrag.js"></script>
		<script type="text/javascript" src="../islider.js"></script>
		<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
		<script type="text/javascript">
			$(document).ready(function () {
				if (jQuery.browser.safari && document.readyState !== 'complete'){
					setTimeout(arguments.callee, 10);
					return;
				}

				$('#pan img').zoom();
			});
		</script>
	</head>

	<body>
	<div class="wrapper">
        <!--<img src="sample2.jpg">-->
	  <div id="pan">
		<img src="your_image.jpg">
	  </div>

	  <div id="images">
		<h3>Switch Images</h3>
		<p>Click an image below to switch the image above to it.</p>
		<img src="sample.jpg" width="100" height="67">
		<img src="sample2.jpg" width="100" height="67">
		<img src="sample3.jpg" width="100" height="67">
	  </div>
	</div>
	</body>
</html>

